<template>
  <div class="system-user-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="540">
      <el-form ref="formRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="100px">
        <el-form-item label="商户名称" prop="name">
          <el-input v-model="state.ruleForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contact_name">
          <el-input v-model="state.ruleForm.contact_name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contact_phone">
          <el-input v-model="state.ruleForm.contact_phone" placeholder="请输入" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="照片" prop="photo">
          <CommonUpload
            class="avatar-uploader"
            v-model="state.ruleForm.photo"
            :show-file-list="false"
            :limit="1"
            accept=".jpg,.jpeg,.png"
            @change="onUploadChange"
          >
            <img v-if="state.ruleForm.photo" :src="getPreviewUrl(state.ruleForm.photo)" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><ele-Plus /></el-icon>
          </CommonUpload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default" :loading="state.submit.loading">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="merchantDialog">
  import { nextTick, reactive, ref } from 'vue';
  import { Merchant } from '/@/models';
  import { DialogType } from '/@/constants/dialog-type';
  import { createMerchant, updateMerchant } from '/@/api/merchant';
  import { ElMessage } from 'element-plus';
  import { assginDefault } from '/@/utils/assign-default';
  import { cloneDeep, get } from 'lodash/fp';
  import CommonUpload from '/@/components/common-upload/index.vue';
  import { getPreviewUrl } from '/@/utils/get-preview-url';

  // 定义子组件向父组件传值/事件
  const emit = defineEmits(['refresh']);

  // 定义变量内容
  const formRef = ref();
  const state = reactive({
    id: '',
    ruleForm: {
      name: '',
      contact_name: '',
      contact_phone: '',
      address: '',
      photo: ''
    },
    rules: {
      name: [{ required: true, message: '不能为空' }]
    },
    roleList: [],
    submit: {
      loading: false
    },
    dialog: {
      isShowDialog: false,
      type: '',
      title: ''
    },
    imageUrl: ''
  });

  // 打开弹窗
  const openDialog = (type: string, row?: Merchant) => {
    state.dialog.type = type;
    state.dialog.isShowDialog = true;
    nextTick(() => {
      if (type === DialogType.EDIT) {
        state.id = row.id;
        assginDefault(state.ruleForm, cloneDeep(row));
        state.dialog.title = '修改商户';
      } else {
        state.id = '';
        state.dialog.title = '新增商户';
        formRef.value?.resetFields();
      }
    });
  };

  // 关闭弹窗
  const closeDialog = () => {
    state.dialog.isShowDialog = false;
  };

  // 取消
  const onCancel = () => {
    closeDialog();
  };

  // 提交
  const onSubmit = async () => {
    await formRef.value.validate();
    try {
      state.submit.loading = true;
      const data = {
        ...state.ruleForm
      };
      if (state.dialog.type === DialogType.EDIT) {
        await updateMerchant(state.id, data);
      } else {
        await createMerchant(data);
      }
      ElMessage.success('保存成功');
      closeDialog();
      emit('refresh');
    } catch (err) {
      console.log(err);
    }

    state.submit.loading = false;
  };

  const onUploadChange = (data: any) => {
    state.ruleForm.photo = get('0.response.data.name', data);
  }

  // 暴露变量
  defineExpose({
    openDialog,
    closeDialog
  });
</script>
